<!--
 * @FileDescription 数显推拉力计
 * @Author lz
 * @Date 20230529 13:15:11
 * @LastEditors lz
 * @LastEditTime 20230529 13:15:11
-->
<template>
  <div class="mul_box" v-drag.offset.clamp drag-trigger>
    <img
      src="/public/images/主界面-仪表_slices/推拉力计_ON_OFF.png"
      @click="onOff"
      style="width: 63px; position: absolute; top: 401px; left: 78px"
    />
    <img
      src="/public/images/主界面-仪表_slices/推拉力计_ZERO.png"
      @click="Zero"
      style="width: 45px; position: absolute; top: 425px; left: 116px"
    />
    <span class="digitalReadout">{{
      HomeContent.Default.PullAndPushDynamometerData.value
    }}</span>
    <span class="unit">N</span>
    <div class="gray" v-if="!isOpen" drag-trigger></div>
    <div class="operateTab T3">
      <img src="/images/ic_放回.png" class="ico_1" />
      <span class="tabTxt" @click="OpenMul">放回</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ClientMessage } from "../../../../runtime/generate/message/ClientMessage";
import WebSocketComponent from "../../../../runtime/module/WebSocket/WebSocketComponent";
import { ref, onMounted } from "vue";
import HomeContent from "../HomeContent";
import MessageCode from "../MessageCode";
// ============================================================
const filcker = ref(true);
const isOpen = ref(false);
function onOff() {
  console.log("点击了开关");
  isOpen.value = !isOpen.value;
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.PULLPUSHDYNAMOMETER_ON
    )
  );
}
function Zero() {
  console.log("点击了置零");
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.PULLPUSHDYNAMOMETER_ABUTMENT
    )
  );
  HomeContent.Default.PullAndPushDynamometerData.value = 0.0;
}
//放回
function OpenMul() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.PULLPUSHDYNAMOMETER_CLOSE
    )
  );
  HomeContent.Default.PullAndPushDynamometerType.value = false;
}

onMounted(async function () {});
</script>

<style scoped>
.mul_box {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  width: 217px;
  height: 710px;
  background-image: url("/images/主界面-仪表_slices/开-1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.digitalReadout {
  font-family: "DS-DIGI-1";
  position: absolute;
  top: 325px;
  left: 85px;
  color: #000000;
  font-size: 52px;
}
.unit {
  color: #000000;
  position: absolute;
  top: 347px;
  right: 58px;
}
.gray {
  background-color: #737b6d;
  width: 106px;
  height: 64px;
  position: absolute;
  top: 324px;
  left: 56px;
}
.Gear {
  display: inline-block;
  position: absolute;
  top: 216px;
  left: 90px;
  color: black;
  font-size: 25px;
  font-family: "DS-DIGI-1";
}
.Mark {
  display: inline-block;
  position: absolute;
  top: 173px;
  /* left: 187px; */
  left: 174px;
  color: black;
  font-size: 40px;
  font-family: "DS-DIGI-1";
  width: 85px;
  text-align: center;
}
.volt {
  color: #000000;
  font-size: 20px;
  font-family: none;
  margin-left: 1px;
}
.Unit {
  display: inline-block;
  position: absolute;
  top: 234px;
  left: 347px;
  color: black;
  font-size: 13px;
  font-weight: 500;
}
.Value {
  display: inline-block;
  position: absolute;
  top: 197px;
  left: 200px;
  color: black;
  font-size: 70px;
  font-family: "DS-DIGI-1";
}
.Time {
  display: inline-block;
  position: absolute;
  top: 237px;
  left: 88px;
  color: black;
  font-size: 35px;
  font-family: "DS-DIGI-1";
}
.noFlicker {
  position: absolute;
  top: 215px;
  /* left: 168px; */
  left: 160px;
  width: 17px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.isFlicker {
  position: absolute;
  top: 215px;
  left: 168px;
  width: 17px;
  opacity: 0;
}

.operateTab {
  width: 92px;
  height: 34px;
  background: #000000;
  border-radius: 4px 4px 4px 4px;
  opacity: 0.9;
  line-height: 34px;
  display: table-cell;
  vertical-align: middle;
}

.tabTxt {
  font-size: 16px;
  color: #fff;
}

.tabTxt:hover {
  color: #a2f95e;
}

.ico_1 {
  width: 20px;
  height: 20px;
  margin-top: -5px;
  margin-left: 5px;
  margin-right: 5px;
}
.T3 {
  position: absolute;
  right: -100px;
  bottom: 11px;
}
</style>
